import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { View, Picker } from '@tarojs/components';
import { AtList, AtListItem, AtMessage } from 'taro-ui';
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "taro-ui/dist/style/components/list.scss";
import Header from '@/components/header';
import Return from '@/components/Return';
import InterestCard from '@/components/InterestCard';
import { getQuesCategory, getAllQuestion } from "@/api/application/interestAsw";
import css from './index.module.less';

/**
 * 应用/趣味答题
 */
export default function InterestAsw() {
  //用户信息
  const [userInfo, setUserInfo] = useState({});
  //答题类型
  const [probType, setProbType] = useState([{ id: 0, categoryName: '请选择答题类型' }]);
  //用户当前所选类型下标
  const [curTypeIndex, setCurTypeIndex] = useState(0);
  //题单列表
  const [quesList, setQuesList] = useState([]);

  //useDidShow, 每次进入页面都会调用, 即刷新
  Taro.useDidShow(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (user) {
        setUserInfo(user.data);
        if (user.data.isAudited !== 1) {
          Taro.atMessage({
            'message': '您还未进行认证',
            'type': 'error',
            'duration': 2000
          });
        }
        else {
          getQuesCategory().then((value) => {
            if (value.data !== undefined) {
              setProbType(value.data);
              getAllQuestion(value.data[curTypeIndex].id, user.data.partyId).then(res => {
                if (res.code === 200) {
                  setQuesList(res.data);
                }
              });
            }
          });
        }
      }
    });
  });

  useEffect(() => {
    if (probType[curTypeIndex].id !== 0) {
      getAllQuestion(probType[curTypeIndex].id, userInfo.partyId).then(res => {
        if (res.code === 200) {
          setQuesList(res.data);
        }
      });
    }
  }, [curTypeIndex]);

  const typeChange = e => {
    setCurTypeIndex(e.detail.value);
  };

  // 查看题目的详情跳转
  const clickCard = (e, title) => {
    const examId = e.mpEvent.currentTarget.id;
    Taro.navigateTo({ url: `./aswDetail/index?examinationId=${examId}&title=${title}&partyId=${userInfo.partyId}` });
  };

  return (
    <View className={css.home}>
      <Header message='趣味答题' left='140px' />
      <Return />

      <View className={css.content}>
        <AtMessage />
        {
          userInfo.isAudited !== 1 ? <View className={css.noAudited}><View>您还未进行认证</View></View> :
            <>
              <Picker
                mode='selector'
                className={css.picker}
                range={probType}
                rangeKey='categoryName'
                onChange={typeChange}
              >
                <AtList>
                  <AtListItem
                    title='请选择答题类型'
                    extraText={probType[curTypeIndex].categoryName}
                  />
                </AtList>
              </Picker>
              <View className={css.list}>
                {
                  quesList.length === 0 ? <View className={css.noCardBox}>您的答题列表为空</View> :
                    quesList.map((item) => {
                      return (
                        <View
                          key={item.id}
                          className={css.cardBox}
                          id={item.id}
                          onClick={item.finish ? () => { } : e => clickCard(e, item.title)}
                        >
                          <InterestCard info={item} />
                        </View>
                      );
                    })
                }
              </View>
            </>
        }
      </View>

    </View >
  );
}